<template>
  <div style="overflow-y: auto;height: 450px">
<!--    <el-row :gutter="32" style="background:#fff;">-->
<!--          <div class="card-panel-description" style="display: inline;">-->
<!--            <div class="card-panel-text">-->
<!--              运维接单排名-->
<!--            </div>-->
<!--          </div>-->
<!--    </el-row>-->
    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column label="排名" align="center" prop="order"/>
      <el-table-column label="姓名" align="center" prop="user"/>
      <el-table-column label="工单数" align="center" prop="num"/>
    </el-table>
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->
  </div>
</template>

<script>
import {
  orderRank
} from "@/api/business/order";

export default {
  props: {
    orderRank: {
      type: Number,
      default: 7
    }
  },
  watch: {
    orderRank: {
      deep: true,
      handler(val) {
        this.orderChart(val);
      }
    }
  },
  name: "Order",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 工单管理表格数据
      orderList: [],
    };
  },
  created() {
    this.getList(this.orderRank);
  },
  methods: {
    /** 查询工单管理列表 */
    getList(num) {
      this.loading = true;
      orderRank(num).then(response => {
        this.orderList = response.rank;
        this.loading = false
      });
    },
  }
}
;
</script>
